// 导入 react 依赖包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 将来这些数据，从服务器端获取
const name = 'Jack';
const age = 18;
// react 中渲染一个数组，直接渲染数组中每一个元素
const likes = ['吃饭', '睡觉', '敲代码'];
// const likes2 = likes.map((item) => item + '!');
// 在 React 中无法直接渲染一个对象，但是渲染对象属性是可以的。
const obj = {
  name: 'Rose',
  age: 18,
};
const sayHi = () => {
  console.log('sayHi');
  // 可以写复杂的逻辑
  if (age > 18) {
    return '谈恋爱函数';
  } else {
    return '好好学习函数';
  }
};

// JSX 表达式
const p = <p>{age}</p>;

// 图片地址
const imgUrl =
  'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

// JSX 结构
const person = (
  <div onClick={sayHi}>
    <h3>{name}</h3>
    <h3>{age + 18}</h3>
    <h3>{likes.join('=>')}</h3>
    <h3>{likes.map((item) => item + '!!')}</h3>
    {/* 注释 */}
    <h3>
      {obj.name}, {obj.age}
    </h3>
    <h3>{age > 18 ? '谈恋爱' : '好好学习'}</h3>
    <h4>{sayHi()}</h4>
    <div>{p}</div>
    <img src={imgUrl} />
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
  </div>
);

root.render(person);
